
import polyfillHelper from './polyfill';
export default class DocumentUtil {
  constructor() {
    polyfillHelper();
  }

  /**
   * @function supportCss3 指定css3属性是否支持
   * @param {string} prop key
   * @return {boolean} true|false
   */
  supportCss3(prop) {
    var div = document.createElement('div'),
      vendors = 'Ms O Moz Webkit'.split(' '),
      len = vendors.length;

    if (prop in div.style) return true;
    prop = prop.replace(/^[a-z]/, function (val) {
      return val.toUpperCase();
    });
    while (len--) {
      if (vendors[len] + prop in div.style) {
        return true;
      }
    }
    return false;
  }

  /**
   * @function isIE 是否为ie阅览器
   * @return {Number} 返回ie版本号，如果为0则不是ie
   */
  isIE() {
    const appName = (navigator.appName || '').toLowerCase();
    const match = navigator.appVersion.match(/msie (\d+)(\.?)/i);
    const version = match ? (match[1] ? parseInt(match[1]) : 0) : 0;
    if (appName === 'microsoft internet explorer' && version) {
      return version;
    } else {
      return false;
    }
  }

  /**
   * @function isEdge 判断是否为ie的edge阅览器
   * @return {Number} 返回ie版本号，如果为0则不是ie
   */
  isEdge() {
    const match = navigator.appVersion.match(/trident\/(\d+)(\.?)/i);
    const version = match ? (match[1] ? parseInt(match[1]) : 0) : 0;
    if (version) {
      return version;
    } else {
      return false;
    }
  }

  /**
   * @function viewSize 获得视口的大小不包含滚动条
   * @return {Object} 返回视口的宽高
   */
  viewSize() {
    const h1 = document.body.clientHeight
    const h2 = document.documentElement.clientHeight
    const w1 = document.body.clientWidth
    const w2 = document.documentElement.clientWidth
    return {
      width: w1 ? w1 : w2,
      height: h1 ? h1 : h2
    }
  }

  /**
   * @function getElementClientRect 获取当前元素对象的位置
   * @param {documentElement} el DOM对象
   */
  getElementClientRect(el) {
    const rect = el.getBoundingClientRect();
    // const docEl = document.documentElement
    // let top = docEl.clientTop;
    // let left = docEl.clientLeft;
    const data = {
      height: rect.height ? rect.height : rect.bottom - rect.top,
      width: rect.width ? rect.width : rect.right - rect.left,
      top: rect.top,
      bottom: rect.bottom,
      left: rect.left,
      right: rect.right
      // top: rect.top - top,
      // bottom: rect.bottom - top,
      // left: rect.left - left,
      // right: rect.right - left
    }
    if (rect.x || rect.y) {
      data.x = rect.x
      data.y = rect.y
    }
    return data;
  }

  isDOM(element) {
    if (typeof HTMLElement === 'object') {
      return element instanceof HTMLElement
    } else {
      return element && typeof element === 'object' && element.nodeType === 1 && typeof element.nodeName === 'string';
    }
  }

  /**
   * @function bindEventListener 添加事件监听
   * @param {Object} element dom对象
   * @param {String} type 事件类型
   * @param {function} handler
   */
  addEventListener(element, type, handler, ...args) {
    element = element || document;
    if (element.addEventListener) {
      element.addEventListener(type, handler, args);
    } else if (element.attachEvent) {
      element.attachEvent('on' + type, handler, args);
    } else {
      element['on' + type] = handler;
    }
  }

  /**
   * @function getStyle 获取样式
   * @param {DOM Object} node DOM节点
   * @param {String} name css样式属性名称
   */
  getStyle(node, name) {
    let style = node.currentStyle ? node.currentStyle : window.getComputedStyle(node, null);
    return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name);
  }

  /**
   * @function createStyle 创建css样式
   * @param {String} style css字符串
   * @param {String|undefined} id 设置创建的style标签id
   */
  createStyle(style, id) {
    const node = document.createElement('style');
    node.type = 'text/css';
    id && (node.id = id);
    document.getElementsByTagName('head')[0].appendChild(node);

    // IE下
    if (node.styleSheet) {
      node.styleSheet.cssText = style;
    } else {
      // 或者写成 node.appendChild(document.createTextNode(style))
      node.innerHTML = style;
    }
  }

  /**
   * @function createElement 创建dom节点
   * @param {DOM} type 节点类型
   * @return 返回创建好的DOM对象
   */
  createElement(type) {
    return document.createElement(type);
  }

  /**
   * @function createDocumentHtml 创建文档html node节点
   * @param {String} stringHtml html字符串
   * @param {Number} flag 标示用那种方式创建
   * @return 返回创建好的DOM对象
   */
  createDocumentHtml(stringHtml, flag) {
    switch (flag) {
      case 1:
        {
          const tempNode = document.createElement('div');
          tempNode.innerHTML = stringHtml;
          return tempNode.firstChild;
        }
      case 2:
        {
          const doc = new DOMParser().parseFromString(stringHtml, 'text/html');
          return doc.body.children;
        }
      default:
        return document.createRange().createContextualFragment(stringHtml);
    }
  }

  /**
   * @function hasElmentView 是否存在元素在视口
   * @param {Object} element dom对象
   * @return {Boolean} 返回真假
   */
  hasElmentView(el, options = {}) {
    let position = this.getElementClientRect(el);
    const docEl = document.documentElement;
    options.offset = options.offset || 0;
    let mark = false;
    if (position.top >= 0) { // 在屏幕下方,则判断top值是否超出底线
      if (position.top < (window.innerHeight || docEl.clientHeight) + parseInt(options.offset)) {
        mark = true;
      }
    } else {
      if (position.height + position.top > -parseInt(options.offset)) { // 在屏幕上方，判断底部是否在窗口内
        mark = true
      }
    }
    return mark
  }

  /**
   * @function remove 移除element
   * @param {Docment Object} element
   */
  remove(element) {
    if (this.isIE() || this.isEdge()) {
      element.removeNode(true);
    } else {
      element.remove();
    }
  }

  /**
   * @function scrollPosition 获得滚动位置
   * @return {Object} 返回当前滚动条的位置
   * {
   *  top:, // 向上滚动距离
   *  left: // 向左滚动距离
   * }
   */
  scrollPosition() {
    return {
      top: document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop,
      left: document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft
    };
  }
}
